<template>
	<div class="app-edit">
		<div class="h-panel">
			<div class="h-panel-bar">
				<span class="h-panel-title">编辑产品</span>
				<span class="h-panel-right"><a @click="close"><i class="icon guanbi"></i></a></span>
			</div>
			<Tabs :datas="tabs" v-model="selected"></Tabs>
			<div class="h-panel-body">
				<Form class="setting-form" mode="threecolumn" ref="form" :model="data" showErrorTip>
					<div :hidden="selected != 1">
						<FormItem label="类目">
							<CategoryPicker @input="changeCate" :option="{keyName:'id',titleName:'name',parentName:'fid',dataMode:'list',getTotalDatas:(resolve)=>{$global.categoryBug(resolve,cate)}}" v-model="data.cate_id"></CategoryPicker>
						</FormItem>
						<FormItem label="标题">
							<input type="text" v-model="data.name" />
						</FormItem>
						<FormItem label="主图">
							<Upload v-model="data.pic"></Upload>
						</FormItem>
						<FormItem label="点击量">
							<input type="text" v-model="data.hits"/>
						</FormItem>
						<FormItem label="权重">
							<input type="text" v-model="data.rank"/>
						</FormItem>
						<FormItem label="上下架">
							<h-switch v-model="data.status">
								<span slot="open">上架</span>
								<span slot="close">下架</span>
							</h-switch>
						</FormItem>
						<FormItem label="图文" single>
							<RichTextEditor v-model="data.detail"></RichTextEditor>
						</FormItem>
					</div>
					<div :hidden="selected != 2">
						<Sku ref="sku" :spec="data.spec" :specData="data.spec_data"></Sku>
					</div>
					<div :hidden="selected != 3">
						<FormItem label="产品表单">
							<Select v-model="data.form_id" :datas="$global.config.forms"></Select>
						</FormItem>
						<FormItem label="订单表单">
							<Select v-model="data.order_form_id" :datas="$global.config.forms"></Select>
						</FormItem>
						<FormItem single></FormItem>
						<Render v-if="data.form_id > 0" v-for="(item,index) in useForms" :key="index" :conf="item || {}"></Render>
					</div>
					<FormItem single>
						<Button color="primary" :loading="loading" @click="submit">提交</Button>
						<Button @click="close">取消</Button>
					</FormItem>
				</Form>
			</div>
		</div>
	</div>
</template>

<script>
import RichTextEditor from '@/components/richtext-editor'
import {Render} from '@/components/custom-form'
import Sku from '@/components/sku'
export default {
	components: {
		RichTextEditor,
		Render,
		Sku
	},
	props: {
		id: Number,
		cate: Array,
		cate_id: Number
	},
	data() {
		return {
			tabs: {
				1:'基本信息',
				2:'规格信息',
				3:'表单信息'
			},
			selected : 1,
			loading: false,
			data: {detail:' ',status:0},
			useForms: []
		}
	},
	watch:{
		'data.form_id' (value){
			if(value > 0){
				this.changeForms(value)
			}
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		async getData() {
			this.loading = true
			if(this.id > 0){
				this.data = await this.$api('GET','product/'+this.id)
			}
			if(this.cate_id > 0 || this.data.cate_id > 0){
				if(!this.id){
					this.data.cate_id = this.cate_id
				}
				this.changeCate(this.data.cate_id)
			}
			this.loading = false
		},
		async submit (){
			let res = ''
			this.loading = true
			this.data.spec = this.$refs.sku.moreSpec ? this.$refs.sku.specList : []
			this.data.spec_data = this.$refs.sku.specDatas
			if(this.data.spec_data){
				if(this.data.spec_data[0]){
					this.data.price = this.data.spec_data[0].price
				}
			}
			this.data.form = this.$global.getCustomFormData(this.useForms)
			if(this.id > 0){
				res = await this.$api('PUT','product/'+this.id,this.data)
			}else{
				res = await this.$api('POST','product',this.data)
			}
			this.loading = false
			if(res){
				this.close()
			}
		},
		close (){
			this.$emit('close')
		},
		changeCate (id){
			let cate = this.$global.getArrayById(this.cate,id)
			if(cate){
				this.$set(this.data,'form_id',cate.form_id)
				if(!this.data.order_form_id){
					this.data.order_form_id = cate.order_form_id
				}
			}
		},
		changeForms (id){
			let form = this.$global.getArrayById(this.$global.config.forms,id,'data')
			if(form){
				if(this.data.form){
					this.useForms = this.$global.putCustomFormData(form,this.data.form)
				}else{
					this.useForms = form
				}
			}
		}
	}
};
</script>

<style lang="less">
	.setting-form {
		.h-panel-body {
			padding-right: 80px;
		}
		.h-uploader-image-empty{
			height: 60px;
			width: 100%;
		}
		.h-uploader-image-container{
			width: 100%;
		}
		.h-uploader-image{
			height: 60px;
			width: 100%;
		}
		.h-form-item {
			padding: 5px !important;
		}
	}
</style>